<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true">
			<view slot="left" class=" flex align-center justify-start">
				<view class=" flex align-center" @click="showStoreChange=true">
					<text>{{changeStoreName}}</text>
					<text class="cuIcon-unfold margin-left-xs"></text>
				</view>
				<view class="margin-left-lg flex align-center" @click="showStateChange=true">
					<text>{{changeStateName}}</text>
					<text class="cuIcon-unfold margin-left-xs"></text>
				</view>
			</view>
		</u-navbar>
		<view v-if="orderlist.length<=0" style="margin-top: 200rpx;">
			<u-empty text="暂无历史订单" mode="history"></u-empty>
		</view>
		<view v-else style="margin-top:20rpx;padding-bottom:200rpx ;">
			<view @click="getOrderDetalis(item)" class="margin-sm bg-white padding-sm" v-for="(item,index) in orderlist"
				:key="index">
				<view class="flex justify-start align-center">
					<text class="text-lg text-black">{{item.RoomName}}</text>
					<view class="padding-xs flex justify-center align-center"
						style=" margin-left: 16rpx; height: 36rpx;border: 1px solid #10c2c4;background: transparent;border-radius: 4rpx;">
						<text style="font-size: 24rpx;color: #10c2c4;">{{item.StateTag}}</text>
					</view>
				</view>
				<view class="margin-tb-xs">
					<text class="text-gray text-sm">{{item.StoreInfo.Address}}</text>
					<text @click.native.stop="gotoLoaction(item)" style="text-decoration: underline;color: #5D7BAA;"
						class=" text-sm margin-left-sm">查看地图</text>
				</view>
				<view class="margin-tb-xs">
					<text class="text-gray text-sm">联系电话 {{item.RoomInfo.Phone}}</text>
				</view>
				<view
					class="padding-top padding-bottom padding-lr-sm margin-tb-sm flex justify-start align-center bg-tea-light">
					<view class="flex flex-direction align-center">
						<view style="width: 10rpx;height: 10rpx;border-radius: 10rpx;background-color:#d48d2d ;"></view>
						<view class="margin-tb-sm"
							style="transform: rotate(90deg);width: 24rpx;border: 1px dashed #d48d2d ;"></view>
						<view style="width: 10rpx;height: 10rpx;border-radius: 10rpx;background-color:#d48d2d ;"></view>
					</view>
					<view class="margin-left-xs">
						<view class="text-sm">
							预约开始时间：{{$u.timeFormat(item.StartTime, 'yyyy-mm-dd hh:MM')}}</view>
						<view class="text-sm margin-top-xs">
							预约结束时间：{{$u.timeFormat(item.EndTime, 'yyyy-mm-dd hh:MM')}}</view>
					</view>
				</view>
				<view class="margin-top-xs">
					<text style="color: #707070;" class="text-sm ">预约门店</text>
					<text class="text-sm margin-left-sm text-black">{{item.StoreInfo.StoreName}}</text>
				</view>
				<view class="margin-top-xs flex align-center justify-between">
					<view>
						<text style="color: #707070;" class="text-sm ">订单编号</text>
						<text class="text-sm margin-left-sm text-black">{{item.Id}}</text>
					</view>
					<text @click.native.stop="copyOrderId(item.Id)" style="text-decoration: underline;color: #5D7BAA;"
						class="text-sm">复制</text>
				</view>
				<!-- <view class="margin-top-xs">
					<text style="color: #707070;" class="text-sm ">订单金额</text>
					<text class="text-sm margin-left-sm text-black">180元</text>
				</view> -->
				<view class="margin-top-xs">
					<text style="color: #707070;" class="text-sm ">下单时间</text>
					<text
						class="text-sm margin-left-sm text-black">{{$u.timeFormat(item.CreateTime, 'yyyy-mm-dd hh:MM')}}</text>
				</view>
				<view class="margin-top-xs">
					<text style="color: #707070;" class="text-sm ">结束时间</text>
					<text
						class="text-sm margin-left-sm text-black">{{$u.timeFormat(item.EndTime, 'yyyy-mm-dd hh:MM')}}</text>
				</view>
				<view v-if="item.State==2 " class="flex align-center margin-top-sm">
					<button @click.native.stop="removeOrder(item.Id)" class="flex align-center justify-center"
						style="background: #F86666;height: 70rpx;width: 50%;margin-right: 10rpx;border-radius: 0px;">
						<text style="font-size: 30rpx;color: #fff;">离店，结束订单</text>
					</button>
					<button @click.native.stop="renewOrder(item.Id)" class="flex align-center justify-center"
						style="background: #7096FB;height: 70rpx;width: 50%;margin-left: 10rpx;border-radius: 0px;">
						<text style="font-size: 30rpx;color: #fff;">续单</text>
					</button>
				</view>
				<view v-if="item.State==1" class=" margin-top-sm">
					<button @click.native.stop="openDoor(item)" class="flex align-center justify-center"
						style="background: #7096FB;height: 70rpx;border-radius: 0px;">
						<text style="font-size: 30rpx;color: #fff;">确认到店，开门</text></button>
				</view>
			</view>
		</view>
		<u-picker :show="showStoreChange" :columns="columnsStore" keyName="name" @cancel="showStoreChange=false"
			@confirm="confirmStore" immediateChange>
		</u-picker>
		<u-picker :show="showStateChange" :columns="columnsState" keyName="name" @cancel="showStateChange=false"
			@confirm="confirmState" immediateChange>
		</u-picker>
		<u-modal :closeOnClickOverlay="true" :show="showOpenDoorModal" title="选择门锁位置" :content="contentOpenDoor">
			<template slot="confirmButton">
				<view class="flex">
					<button class="flex-twice cu-btn bg-blue margin-left-xs" @click="changeOpenDoor(0)">开大门</button>
					<button class="flex-twice cu-btn bg-blue margin-left-xs" @click="changeOpenDoor(-1)">开二楼门</button>
				</view>
				<view class="flex margin-top-sm">
					<button class="flex-twice cu-btn  bg-tea  margin-left-xs" @click="changeOpenDoor(1)">开室内门</button>
					<button class="flex-twice cu-btn bg-gray margin-left-xs"
						@click="showOpenDoorModal=false">取消</button>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: 'Order',
		data() {
			return {
				orderlist: [],
				showStoreChange: false,
				showStateChange: false,
				columnsStore: [],
				changeStoreName: '全部门店',
				changeStateName: '全部订单',
				changStoreId: '',
				changState: '',
				columnsState: [
					[{
							id: '9',
							name: '全部订单'
						},
						{
							id: '0',
							name: '未支付'
						},
						{
							id: '1',
							name: '已支付未消费'
						},
						{
							id: '2',
							name: '使用中'
						},
						{
							id: '3',
							name: '消费完成'
						},
						{
							id: '4',
							name: '已取消'
						}
					]
				],
				changeOrder: {},
				showOpenDoorModal: false,
				contentOpenDoor: '',
				pageIndex: 0,
			}
		},
		onShow() {
			this.pageIndex = 0;
			this.getStoreList();
			this.getOrderList();
		},
		methods: {
			//确认到店，开门
			confirmOrder(orderId) {


			},
			copyOrderId(Id) {
				uni.setClipboardData({
					data: Id,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '已复制到剪切板'
						})
					}
				});
			},
			//离店
			removeOrder(orderId) {
				let that = this;
				uni.showModal({
					title: '操作提示',
					content: '确认离店后订单将提前关闭，是否确认?',
					showCancel: true,
					success: function(e) {
						if (e.cancel) {
							return;
						}
						that.confirmRemoveOrder(orderId);
					}
				})
			},
			//确认离店
			confirmRemoveOrder(orderId) {
				uni.showLoading();
				uni.$u.http.post('/Customer/ConfirmRemoveOrder', {
					orderId: orderId
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				});
			},
			//续单
			renewOrder(orderId) {
				uni.navigateTo({
					url: '/pagesA/order/reneworder?orderId=' + orderId
				})
			},
			//打开房门
			openDoor(item) {
				this.contentOpenDoor = '当前订单：' + item.StoreInfo.StoreName + ' 房间：' + item.RoomName;
				this.changeOrder = item;
				this.showOpenDoorModal = true;
			},
			changeOpenDoor(e) {
				this.showOpenDoorModal = false;
				uni.showLoading({
					title: '开锁中，请稍后'
				});
				uni.$u.http.post('/Customer/OpenDoor', {
					orderId: this.changeOrder.Id,
					index: e
				}).then(res => {
					//完成后再次查询门锁状态，
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				});
			},
			//拨打电话
			callPhone(item) {
				//#ifdef MP-WEIXIN
				uni.makePhoneCall({
					phoneNumber: item.StoreInfo.Phone
				});
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(item.StoreInfo.Phone, true);
				//#endif
			},
			gotoLoaction(item) {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(item.StoreInfo.Lat),
					longitude: parseFloat(item.StoreInfo.Long),
					fail: function(err) {
						that.$refs.uToast.show({
							message: '导航失败！',
							type: 'error',
							position: 'top'
						});
					}
				})
			},
			//获取所有房间
			getStoreList() {
				uni.$u.http.post('/Customer/GetStoreList').then(res => {
					this.columnsStore = [];
					let arry = new Array();
					arry.push({
						id: '',
						name: '全部门店'
					});
					res.data.forEach((x) => {
						arry.push({
							id: x.Id,
							name: x.StoreName
						})
					});
					this.columnsStore.push(arry);
				})
			},
			confirmStore(e) {
				this.showStoreChange = false;
				this.changStoreId = e.value[0].id;
				this.changeStoreName = e.value[0].name;
				this.pageIndex = 0;
				this.getOrderList();
			},
			confirmState(e) {
				this.showStateChange = false;
				this.changState = e.value[0].id;
				this.changeStateName = e.value[0].name;
				this.pageIndex = 0;
				this.getOrderList();
			},
			getOrderList() {
				this.pageIndex++;
				if (this.pageIndex == 1) {
					this.orderlist = [];
					//console.log('重置了')
				}
				//console.log(this.pageIndex)
				uni.showLoading();
				uni.$u.http.post('/Customer/GetOrderList', {
					storeId: this.changStoreId,
					state: this.changState,
					pageIndex: this.pageIndex
				}).then(res => {
					if (res.data.length <= 0) {
						uni.showToast({
							icon: 'none',
							title: '没有更多'
						});
						this.pageIndex--;
						return;
					}
					this.orderlist = this.orderlist.concat(res.data);
				});
			},
			getOrderDetalis(item) {
				uni.navigateTo({
					url: '/pagesA/store/orderdetalis?id=' + item.Id
				})
			}
		}
	}
</script>

<style scoped>
	.icon-border {
		width: 50rpx;
		height: 50rpx;
		background: #eee;
		line-height: 50rpx;
		border-radius: 50rpx;
		text-align: center;
	}

	.icon-border-nomal {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		text-align: center;
	}
</style>